<template>
  <div class="home">
    <!-- 顶部欢迎区 -->
    <el-card
      class="welcome-card"
      shadow="hover"
      :class="{ dark: layoutSettingStore.isDark }"
    >
      <div class="welcome-content">
        <el-avatar :size="80" :src="userStore.avatar" />
        <div class="user-info">
          <h2>欢迎回来，{{ userStore.username }} 🎉</h2>
          <p>今天是 {{ today }}</p>
        </div>
        <div class="welcome-logo">
          <!-- <img src="../../../public/Usts-logo.png" alt=""> -->
          <img src="../../../public/Usts-logo-test.png" alt="" />
        </div>
      </div>
    </el-card>

    <div class="main-grid">
      <!-- 系统统计 -->
      <el-card class="stat-card" shadow="hover">
        <h3>📊 系统统计</h3>
        <div class="stat-box">
          <div class="stat-item">
            <p class="num">{{ courseManageStore.tableData.length }}</p>
            <p>课程数</p>
          </div>
          <div class="stat-item">
            <p class="num">{{ userManageStore.tableData.length }}</p>
            <p>学生数</p>
          </div>
          <div class="stat-item">
            <p class="num">{{ teacherManageStore.tableData.length }}</p>
            <p>教师数</p>
          </div>
        </div>
      </el-card>

      <!-- 公告区 -->
      <el-card class="notice-card" shadow="hover">
        <h3 style="margin-bottom: 20px">📢 最新公告</h3>
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in NoticeStore.tableData"
            :key="index"
            :timestamp="item.date"
          >
            {{ item.name }}
          </el-timeline-item>
        </el-timeline>
      </el-card>

      <!-- 快捷入口 -->
      <el-card class="quick-card" shadow="hover">
        <h3>🚀 快捷入口</h3>
        <div class="quick-links">
          <el-button type="primary" @click="go('score')">成绩管理</el-button>
          <el-button type="success" @click="go('course')">课程管理</el-button>
          <el-button type="warning" @click="go('notice')">公告管理</el-button>
        </div>
      </el-card>
    </div>
    <div class="footer">
      <img src="../../../public/Usts-logo.png" alt="logo" class="logo" />
      <span class="project-name">学生信息管理系统</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import useUserStore from '@/store/modules/user'
import { useRouter } from 'vue-router'
import useTeacherManageStore from '@/store/modules/teacherManage'
import useUserManageStore from '@/store/modules/userManage'
import useCourseManageStore from '@/store/modules/course'
import useNoticeStore from '@/store/modules/notice'
import useLayOutSettingStore from '@/store/modules/setting'
let layoutSettingStore = useLayOutSettingStore()

// 测试获取数据代码
import { onMounted } from 'vue'
// import useUserManageStore from '@/store/modules/userManage'
// let userManageStore = useUserManageStore()

onMounted(() => {
  userManageStore.getStudents()
})

let NoticeStore = useNoticeStore()
let teacherManageStore = useTeacherManageStore()
let userManageStore = useUserManageStore()
let courseManageStore = useCourseManageStore()

let $router = useRouter()
const userStore = useUserStore()

// 今日日期
const today = dayjs().format('YYYY-MM-DD')

// 快捷跳转（模拟）
const go = (path: string) => {
  $router.push(path)
}
</script>

<style scoped>
.home {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;
  background: linear-gradient(to top right, red, hotpink, skyblue);
}

.welcome-content {
  display: flex;
  align-items: center;
}

.welcome-logo {
  margin-left: auto;
  opacity: 0.6;
}
.user-info {
  margin-left: 20px;
}

.user-info h2 {
  margin: 0 0 8px 0;
}

.main-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 20px;
}

.stat-card {
  grid-column: span 2;
}

.stat-box {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
}

.stat-item {
  text-align: center;
}

.stat-item .num {
  font-size: 22px;
  font-weight: bold;
  color: #409eff;
}

.notice-card {
  max-height: 300px;
  overflow-y: auto;
}

.quick-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.quick-links {
  margin-top: 50px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.footer {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #e4e7ed;
  text-align: center;
  color: #606266;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* logo 和文字间距 */
}

.footer .logo {
  width: 50px;
  height: 50px;
}

.footer .project-name {
  font-size: 30px;
  font-weight: 500;
}
</style>
